<script lang="ts" setup>
import { computed } from 'vue';

const count = defineModel<number>({ default: 0 });

const props = withDefaults(
  defineProps<{
    min?: number;
    max?: number;
    step?: number;
    disabled?: boolean;
  }>(),
  {
    min: 0,
    max: 9999,
    step: 1,
    disabled: false
  }
);

const isMinusDisabled = computed(() => props.disabled || count.value <= props.min);
const isPlusDisabled = computed(() => props.disabled || count.value >= props.max);

const emit = defineEmits<{ update: [count: number] }>();

function decrement() {
  if (isMinusDisabled.value) return;
  count.value -= props.step;
  emit('update', count.value);
}

function increment() {
  if (isPlusDisabled.value) return;
  count.value += props.step;
  emit('update', count.value);
}
</script>

<template>
  <view class="apt-counter">
    <image
      :src="`/static/icon_minus_circle${isMinusDisabled ? '_disabled' : ''}.png`"
      class="apt-counter__action"
      @click.stop="decrement"
    />
    <view class="apt-counter__count">{{ count }}</view>
    <image
      :src="`/static/icon_plus_circle${isPlusDisabled ? '_disabled' : ''}.png`"
      class="apt-counter__action"
      @click.stop="increment"
    />
  </view>
</template>

<style lang="scss">
.apt-counter {
  display: flex;
  justify-content: center;
  align-items: center;

  &__action {
    width: 48rpx;
    height: 48rpx;
  }

  &__count {
    width: 90rpx;
    text-align: center;
  }
}
</style>
